import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:xim/common/style/colors.dart';
import 'package:xim/common/util/device.dart';
import 'package:xim/widget/dash_chat_2/dash_chat_2.dart';
import 'package:xim/screen/page/select_location_page.dart';
import 'package:wechat_camera_picker/wechat_camera_picker.dart';

/// 聊天框：底部操作面板
class ChatBottomActionPanel extends StatefulWidget {
  final double height;

  final void Function(XFile file)? imageSelected;
  const ChatBottomActionPanel({Key? key, required this.height, this.imageSelected}) : super(key: key);

  @override
  State<ChatBottomActionPanel> createState() => _ChatBottomActionPanelState();
}

class _ChatBottomActionPanelState extends State<ChatBottomActionPanel> {

  var bgColor = ModelColor(darkColor: Colors.black, lightColor: const Color(0xffededed));

  List<Item> get items => [
        Item(
            icon: InkWell(
              child: Icon(
                Icons.image,
                color: bgColor.reverse,
              ),
              onTap: () {
                pickerImage().then((file) {
                  if (file!=null) {
                    widget.imageSelected?.call(file);
                    // for (var f in files) {
                    //   chatController.sendMessage(ChatMessage(
                    //       user: chatController.state.currUser,
                    //       createdAt: DateTime.now(),
                    //       medias: [
                    //         ChatMedia(url: f.path, type: MediaType.image, fileName: f.name)
                    //       ]));
                    // }
                  }
                });
              },
            ),
            tips: "相册",
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            icon: InkWell(
              child: Icon(Icons.camera_alt_outlined, color: bgColor.reverse),
              onTap: () async {},
            ),
            tips: "相机",
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            icon: Icon(
              Icons.video_camera_back_outlined,
              color: bgColor.reverse,
            ),
            tips: "视频通话",
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            tips: "位置",
            icon: InkWell(
              onTap: () {
                // TODO 位置
                // Get.to(SelectLocationPage());
              },
              child: Icon(Icons.location_on, color: bgColor.reverse),
            ),
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            tips: "语音输入",
            icon: Icon(Icons.keyboard_voice, color: bgColor.reverse),
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            tips: "文件",
            icon: Icon(Icons.file_copy, color: bgColor.reverse),
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            tips: "转账",
            icon: Icon(Icons.monetization_on, color: bgColor.reverse),
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
        Item(
            tips: "音乐",
            icon: Icon(Icons.music_note_outlined, color: bgColor.reverse),
            tipsStyle: TextStyle(color: bgColor.reverse, fontSize: 12)),
      ];

  Future<XFile?> pickerImage() async {
    final ImagePicker picker = ImagePicker();
    return await picker.pickMedia(requestFullMetadata: false);
  }

  void pickFromCamera() {
    CameraPicker.pickFromCamera(context).then((value) {
      var file = value?.file;
      if (file != null) {
        // https://pub.dev/packages/wechat_camera_picker
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    setState(() {
      bgColor.model = PlatformUtils.getBrightness(context);
    });
    // this.context = context;
    return Container(
      color: bgColor.color,
      height: widget.height,
      child: GridView.count(
        crossAxisCount: 4,
        children: List.generate(
            items.length,
            (index) => Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    items[index].icon,
                    items[index].tipsText,
                  ],
                )),
      ),
    );
  }
}

class Item {
  final Widget icon;

  final String tips;

  final TextStyle? tipsStyle;

  Text get tipsText => Text(
        tips,
        style: tipsStyle,
      );

  Item({required this.icon, required this.tips, this.tipsStyle});
}
